<template>
    <view>
        <Header></Header>
        <view>
            <view class="back">
                <u-icon style="border: 1px #00eaff solid;border-radius: 50%;margin-left: 50rpx;margin-right: 20rpx"
                        name="arrow-left" color="#00eaff" @click="back"></u-icon>
                <text style="color: #00eaff;padding-right: 30rpx">Choose accessories</text>
            </view>
            <view>
                <view class="select">
                    <text style="padding-right: 10rpx">classification</text>
                    <uni-data-select
                        v-model="category_id"
                        :localdata="categoryList"
                        @change="changeCategory"
                        placeholder="Please select a category"
                        class="select-item"
                    ></uni-data-select>
                </view>
                <view style="display: flex;padding: 10rpx;align-items: center;color: white">
                    <view @click="changeSort" class="sort" style="padding-right: 10rpx">
                        <view v-if="sort === 1">
                            <u-icon name="arrow-downward" style="padding-right: 10rpx"></u-icon>
                            <!--                            <text>降序</text>-->
                        </view>
                        <view v-if="sort === 2">
                            <u-icon name="arrow-upward" style="padding-right: 10rpx"></u-icon>
                            <!--                            <text>升序</text>-->
                        </view>
                    </view>

                    <u-search shape="round" v-model="search" :show-action="false" placeholder="Search for accessories"
                              bg-color="transparent" color="#ffffff"
                              @change="changeSearch"></u-search>
                    <view @click="screenPopup" class="screen" style="padding-left: 10rpx">
                        <i class="custom-icon custom-icon-shaixuan" style="padding-right: 10rpx"></i>
                        <text>search</text>
                    </view>
                </view>
                <u-popup ref="price" mode="center" border-radius="25" :width="windowsWidth+'px'" closeable>
                    <view class="price">
                        <h2 style="text-align: center;padding-top: 30rpx">Value screening</h2>
                        <h3 style="text-align: center;padding-top: 30rpx">Diamond</h3>
                        <view style="padding-top: 40rpx">
                            <u-row gutter="30" justify="around">
                                <u-col span="5">
                                    <u-input
                                        v-model="minPrice"
                                        type="number"
                                        placeholder="Minimum"
                                        input-align="center"
                                        maxlength="5"
                                        class="priceInput"
                                    ></u-input>
                                </u-col>
                                <u-col span="2" text-align="center">
                                    <view>——</view>
                                </u-col>
                                <u-col span="5">
                                    <u-input
                                        v-model="maxPrice"
                                        type="number"
                                        placeholder="Maximum"
                                        input-align="center"
                                        maxlength="5"
                                        class="priceInput"
                                    ></u-input>
                                </u-col>
                            </u-row>
                        </view>
                        <view class="btnView">
                            <u-button @click="resetting" shape="circle" size="medium" class="btn">resetting</u-button>
                            <u-button @click="confirm" shape="circle" size="medium" class="btn" type="primary">determine
                            </u-button>
                        </view>
                    </view>
                </u-popup>
            </view>
        </view>
        <view>
            <view>
                <custom-box-list :item="item"></custom-box-list>
            </view>
            <view v-if="noMore">
                <u-divider style="padding: 30rpx" bg-color="#0f0e2d">There's no more data left</u-divider>
            </view>
        </view>
        <!-- 提示框 -->
        <u-toast ref="uToast"/>
        <custom-tabbar></custom-tabbar>
    </view>
</template>

<script>
import Header from "@/components/header/header.vue";
import CustomBoxList from "@/components/customBoxList/customBoxList.vue";
import CustomTabbar from "@/components/tabbar/tabbar.vue";

export default {
    name: 'customBox',
    components: {
        Header,
        CustomBoxList,
        CustomTabbar,
    },
    data() {
        return {
            windowsWidth: 0,
            // 分类
            category_id: '',
            categoryList: [],
            // 排序规则 1： 价格 倒叙  2  价格 正序
            sort: 1,
            // 搜索
            search: '',
            // 筛选
            minPrice: '',
            maxPrice: '',
            // 自定义商品列表
            item: [],
            total: '',
            pagesize: 10,
            current_page: 1,
            last_page: 0,
            // 到底
            noMore: false,
            // 滚动距离
            scrollTop: 0
        };
    },
    mounted() {
        this.windowsWidth = this.$store.getters.getWindowsWidth;
    },
    onLoad() {
        this.getCategoryList()
        this.getCustomBoxGoodsList()
    },
    // 触底加载更多
    onReachBottom() {
        this.current_page++
        this.$u.api.getCustomBoxGoodsList({
            page: this.current_page,
            pagesize: this.pagesize,
            category_id: this.category_id,
            sort: this.sort,
            search: this.search,
            price: this.minPrice !== '' && this.maxPrice !== '' ? this.minPrice + '-' + this.maxPrice : '',
        }).then(res => {
            // 没数据
            if (res.data.data.length === 0) {
                this.noMore = true;
                return
            }
            this.noMore = false;
            this.item = this.item.concat(res.data.data)
            this.total = res.data.total
            this.current_page = res.data.current_page
            this.last_page = res.data.last_page
        })
    },
    // 滚动监听
    onPageScroll(e) {
        this.scrollTop = e.scrollTop;
    },
    methods: {
        // 返回
        back() {
            this.$u.route('/pages/prizeRate/prizeRate');
        },
        // 点击排序规则
        changeSort() {
            if (this.sort === 1) {
                this.sort = 2;
            } else if (this.sort === 2) {
                this.sort = 1;
            }
            this.getCustomBoxGoodsList()
        },
        // 点击下拉列表
        changeCategory() {
            this.getCustomBoxGoodsList()
        },
        // 获取分类列表
        getCategoryList() {
            this.$u.api.getCategoryList().then(res => {
                res.data.forEach(item => {
                    item.text = item.name;
                    item.value = item.id;
                });
                this.categoryList = res.data;
            })
        },
        // 搜索
        changeSearch(value) {
            this.search = value;
            this.getCustomBoxGoodsList()
        },
        // 筛选
        screenPopup() {
            this.$refs.price.open()
        },
        // 价格筛选
        resetting() {
            this.minPrice = '';
            this.maxPrice = '';
            this.getCustomBoxGoodsList()
            this.$refs.price.close()
        },
        // 确定
        confirm() {
            // 检查minPrice和maxPrice是否为空
            if (!this.minPrice || !this.maxPrice) {
                this.$refs.uToast.show({
                    title: 'Please enter filtering criteria',
                    type: 'error'
                });
                return;
            }
            // 将minPrice和maxPrice转换为数值
            this.minPrice = parseInt(this.minPrice, 10);
            this.maxPrice = parseInt(this.maxPrice, 10);

            // 检查maxPrice是否大于minPrice
            if (this.minPrice > this.maxPrice) {
                this.$refs.uToast.show({
                    title: 'The maximum value must be greater than the minimum value',
                    type: 'error'
                });
                return;
            }
            this.getCustomBoxGoodsList()
            this.$refs.price.close()
        },
        // 获取自定义盒子商品列表
        getCustomBoxGoodsList() {
            this.current_page = 1;
            this.$u.api.getCustomBoxGoodsList({
                page: this.current_page,
                pagesize: this.pagesize,
                category_id: this.category_id,
                sort: this.sort,
                search: this.search,
                price: this.minPrice !== '' && this.maxPrice !== '' ? this.minPrice + '-' + this.maxPrice : '',
            }).then(res => {
                // 没数据
                if (res.data.data.length === 0) {
                    this.noMore = true;
                    this.item = []
                    return
                }
                this.noMore = false;
                this.item = res.data.data;
                this.total = res.data.total;
                this.current_page = res.data.current_page
                this.last_page = res.data.last_page;

            })
        }
    }
    ,
}
</script>

<style lang="scss" scoped>
.back {
    line-height: 100rpx;
    //margin-left: 30rpx;
    color: white;
    font-size: 34rpx;
    background-image: url("@/static/images/header-bg.png");
    background-size: cover;
    height: 100rpx;
}

.select {
    display: flex;
    padding: 30rpx;
    flex-direction: row;
    align-items: center;
    color: #ffffff;

    .select-item {
        padding-left: 10rpx;

        ::v-deep.uni-select__input-text {
            color: #ffffff;
        }

        ::v-deep.uni-select__selector {
            color: #ffffff;
            background-color: #0f0e2d;
        }

        ::v-deep .uni-select__selector-item:hover {
            background-color: transparent;
            color: #00eaff;
        }
    }
}

::v-deep .u-content {
    backdrop-filter: brightness(90%) !important;
    background-color: rgba(255, 255, 255, 0.15) !important;

}


.priceInput {
    margin: 0 10rpx;
    border-radius: 20rpx;
    border: 1px solid #222222;

    ::v-deep .uni-input-input {
        color: #ffffff;
    }
}

.price {
    background-color: #0f0e2d;
    color: #ffffff;

    .btnView {
        display: flex;
        justify-content: center;
        text-align: center;
        // 左边距
        padding: 40rpx 20rpx;

        .btn {

        }
    }
}

::v-deep .u-type-success {
    background-color: #0f0e2d;
    border: none;
}

::v-deep .u-type-error {
    background-color: #0f0e2d;
    border: none;
}
</style>
